Remove Blue400-100 #105993
Remove Blue400-100 #105993
Conversation
Jesse-Box
commented
Jan 9, 2026
Jesse-Box
commented
- Modified: CSS value for property 'color' to 'content.accent'
- Modified: CSS value for property 'background' to 'graphics.accent.vibrant'
- Modified: CSS value for css property 'border' to 'border.accent.vibrant'
- Modified: General border styling of Trace Waterfall.
- Modified: General styles of logs
- Modified: Severity Log level 'ERROR'
- Reverted: Styling selected state for trace row
- Modified: styling of select nav and stepper
- Modified: Replay scrubber styling
- Modified: token values for buttons
- Modified: tokens used to style slider
- Modified: tokens used for tabs
- Modified: tokens used for switch
- Modified: token used for a few background situations
- Modified: tokens used for global styling
- Modified: tokens used for toast
- Modified: token values for replay tab lists
- Modified: tokens used for checkbox
- Modified: some background colour variables
- Modified: tokens used for color property
- Modified: token values for background property
- Modified: Tokens used for alerts
- Modified: Tokens used for the flamechart
- Modified: event group token values
- Modified: various chart components to use appropriate tokens
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| ${NavLinkIconContainer} { | ||
| background-color: ${p => p.theme.colors.blue100}; | ||
| color: ${p => p.theme.tokens.interactive.link.accent.hover} $ | ||
| ${NavLinkIconContainer} { |
There was a problem hiding this comment.
Stray $ character breaks CSS hover styling
High Severity
The color property on line 395 ends with a stray $ character instead of a semicolon. This creates invalid CSS where the color value includes $ and the subsequent ${NavLinkIconContainer} selector gets malformed. The intended code should have a semicolon after the hover} template expression, followed by the nested selector on a new line. This will break the hover styling for the active navigation links.
There was a problem hiding this comment.
Good catch! Fixed
| background: chonkFor(theme, theme.colors.chonk.blue400), | ||
| color: theme.colors.white, | ||
| surface: theme.tokens.interactive.chonky.embossed.accent.background, | ||
| background: theme.tokens.interactive.chonky.embossed.accent.chonk, |
There was a problem hiding this comment.
@TkDodo Just wanted to surface this because it shows how we migrate off chonkFor()
# Conflicts: # static/app/views/issueList/pages/dynamicGrouping.tsx
| &:hover { | ||
| background-color: ${p => p.theme.colors.yellow200}; | ||
| background-color: ${p => p.theme.tokens.background.transparent.warning.muted}; |
There was a problem hiding this comment.
Highlighted row loses hover feedback with identical tokens
Medium Severity
The highlighted row's &:hover state now uses background.transparent.warning.muted which is identical to the non-hover state on line 52. Previously, the code used yellow100 for normal and yellow200 for hover, providing visual feedback when users hover over highlighted log rows. With both states using the same token, there's no longer any hover feedback for highlighted rows, degrading the user experience.
